<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      background: url("../img/bg1.png") no-repeat;
      background-color: #cccccc;
    }
    div{
      position: absolute;
      width: 200px;
      height: 100px;
     background: url("../img/bear.png");
      margin: 200px 0;
      animation: run 1s steps(8) infinite,move 3s forwards linear;
    }
    @keyframes run {
      0%{

      }
      100%{
        background-position: -1600px 0px;
      }
    }
    @keyframes move {
      0%{

        left: 0;
      }
      100%
      {

        left: 50%;
        transform: translateX(-50%);
      }
      }
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>
